<!--
 * @Author: WangZhiYu <w19165802736@163.com>
 * @Date: 2025-04-19 22:37:51
 * @LastEditTime: 2025-04-27 14:15:53
 * @LastEditors: WangZhiYu <w19165802736@163.com>
 * @Descripttion:
-->
<template>
  <div class="share1">
    <div class="share1-header">
      <!-- <img class="share1Logo" src="@/assets/img/shareLogo.png" alt="" /> -->
      <span>{{ projectName }}</span>
    </div>
    <div class="share1-body">
      <span class="share1-back" @click="backFolder" v-if="isFolder"><i class="el-icon-back"></i></span>
      <p class="share1-title">
        {{ $t('message.lang56') }}
      </p>
      <div class="files">
        <div class="fileItem" v-for="item in fileList" @click="openFolder(item)">
          <img class="img1" v-if="item.fileType === 'D'" src="../../assets/img/img_wjs.png" alt="" />
          <video controls class="video1" v-else-if="item.fileExt === 'mp4' || item.fileExt === 'mov'" alt="" :src="item.filePath" />
          <img class="img1" v-else-if="item.fileExt === 'png' || item.fileExt === 'jpg'" :src="item.filePath" alt="" />
          <img class="img1" v-else src="../../assets/img/cloud.png" alt="" />
          <p>
            <span class="filename">{{ item.fileName }}</span>
            <span @click="loadingItemId === item.ID ? null : download(item)" v-if="item.fileType !== 'D'">
              <i :class="loadingItemId === item.ID ? 'el-icon-loading' : 'el-icon-download'"></i>
            </span>
          </p>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import { SystemMangeAPI } from '@/api/SystemMange';

export default {
  data() {
    return {
      projectId: '',
      projectName: '',
      files: [],
      fileList: [],
      isFolder: false,
      idList: [],
      loadingItemId: null,
    };
  },
  created() {
    this.projectName = this.$route.params.name;
    this.fileList = this.$route.query;
    this.files = this.$route.query;
  },
  methods: {
    async download(item) {
      this.loadingItemId = item.ID;
      const confirmed = window.confirm(this.$t('message.confirmDownload') + `：${item.fileName}？`);
      if (!confirmed) return;
      try {
        if (item.fileExt === 'mp4' || item.fileExt === 'mov') {
          // 下载视频
          await this.downloadAliossVideoBlob(item.filePath, item.fileName);
        } else {
          const element = document.createElement('a');
          element.setAttribute('href', item.filePath);
          element.setAttribute('download', item.fileName);
          element.click();
        }
      } catch (e) {
        console.error(e);
        this.$message.error('下载失败');
      } finally {
        this.loadingItemId = null;
      }
    },
    downloadAliossVideoBlob(url, filename = 'video.mp4') {
      const isSafari = /^((?!chrome|android).)*safari/i.test(navigator.userAgent);

      if (isSafari) {
        // Safari 无法强制 download，改用新标签页方式
        const a = document.createElement('a');
        a.href = url;
        a.target = '_blank';
        a.rel = 'noopener noreferrer';
        document.body.appendChild(a);
        a.click();
        document.body.removeChild(a);
      } else {
        // Chrome、Edge、Firefox 支持 download
        const a = document.createElement('a');
        a.href = url;
        a.download = filename;
        document.body.appendChild(a);
        a.click();
        document.body.removeChild(a);
      }
    },
    // 打开文件夹
    openFolder(item) {
      // 判断是否为文件夹类型
      if (item.fileType !== 'D') return;
      this.projectId = item.projectId;
      SystemMangeAPI.ListFiles({ projectId: item.projectId, parentId: item.ID }).then(({ code, data }) => {
        if (code === 0) {
          this.fileList = data;
          this.isFolder = true;
          this.idList.push(item.parentId);
        }
      });
    },
    // 返回上一页
    backFolder() {
      if (this.idList.length === 0) {
        return;
      }
      const id = this.idList.pop();
      SystemMangeAPI.ListFiles({ projectId: this.projectId, parentId: id }).then(({ code, data }) => {
        if (code === 0) {
          if (this.idList.length === 0) {
            this.fileList = this.files;
            this.isFolder = false;
          } else {
            this.fileList = data;
          }
          // this.isFolder = true;
        }
      });
    },
  },
  computed: {
    computedFiles() {
      if (this.isFolder) {
        return this.fileList;
      } else {
        return this.files;
      }
    },
  },
};
</script>
<style>
.share1 {
  color: #fff;
}

.share1-header span {
  font-size: 1.375rem;
  margin-left: 0.625rem;
}

.share1-header {
  width: 100%;
  height: 3.75rem;
  line-height: 3.75rem;
  border-bottom: 0.0625rem solid #30323b;
  box-sizing: border-box;
}

.share1Logo {
  height: 50%;
  margin-left: 0.625rem;
  margin-top: 0.625rem;
}

.share1-title {
  width: 100vw;
  font-size: 1.5rem;
  margin-top: 1.25rem;
  text-align: center;
}

.share1-back,
.el-icon-download,
.el-icon-view {
  position: absolute;
  left: 0.625rem;
  top: 50%;
  transform: translateY(-50%);
}

.share1-back {
  top: 8.3%;
}

.el-icon-download {
  right: 0.625rem;
  left: auto;
}

.el-icon-view {
  right: 3.125rem;
  left: auto;
}

.share1-back i,
.el-icon-download,
.el-icon-view {
  font-size: 1.6875rem;
}

.files {
  margin-top: 2.5rem;
  display: flex;
  flex-wrap: wrap;
}

.fileItem {
  width: 50%;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}

.fileItem p {
  position: relative;
  width: 79.5%;
  height: 2.5rem;
  line-height: 2.5rem;
  position: relative;
  top: -2.6875rem;
  background-color: #434141;
  padding-left: 0.625rem;
}

.fileItem p span {
  display: block;
  width: 80%;
  font-size: 1.375rem;
  white-space: nowrap; /* 禁止换行 */
  overflow: hidden; /* 隐藏超出部分 */
  text-overflow: ellipsis; /* 超出显示省略号（可选） */
}

.img1 {
  width: 70%;
}

.video1 {
  width: 80%;
  height: 12.5rem;
}

.filename {
  width: 80%;
}
</style>
